<template>
  <view>
    <view class="item" @click="ToNewsDetail()">
      <view class="item-header">
        <view class="item-header-left">
          <image :src="item.user.avater" />
          <text>{{ item.user.nickname }}</text>
        </view>
        <view class="item-header-right">
          <button type="primary" size="mini" plain="true" v-if="!item.concern">
            关注
          </button>
          <button type="primary" size="mini" v-else>已关注</button>
        </view>
      </view>
      <view class="item-body">
        <view class="item-body-content">
          {{ item.content }}
        </view>
        <view :class="img_showStyle">
          <image
            :src="img"
            v-for="(img, index) in img_showList"
            mode="aspectFill"
            @click="previewImage(index)"
          />
        </view>
        <view class="img_more" v-if="item.imgList.length > 3">
          <text>+{{ item.imgList.length - img_showList.length }}</text>
        </view>
      </view>
      <view class="item-bottom">
        <view class="item-bottom-like">
          <image
            src="../../static/img/like.png"
            class="item-bottom-like-icon"
            v-if="!item.is_favor"
          ></image>
          <image
            src="../../static/img/liked.png"
            class="item-bottom-like-icon"
            v-else
          ></image>
          <text>{{ item.favor_count }}</text>
        </view>
        <view class="item-bottom-comment">
          <image
            src="../../static/img/comment.png"
            class="item-bottom-comment-icon"
          ></image>
          <text>{{ item.comment_count }}</text>
        </view>
      </view>
    </view>

    <!-- <view>
			<view>
				<text>111111</text>
				<image src="{{item.cover}}"></image>
				<text>{{item.user.nickname}}</text>
			</view>
		</view> -->
    <view class="camera" @click="ToPublish">
      <image src="../../static/img/camera.png"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newsList: [],
      item: {
        _id: '123',
        concern: true,
        content:
          '你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好',
        user: {
          nickname: 'xin',
          avater:
            'https://hbimg.huabanimg.com/27cadf1a2281400d36844d2adff2a8803a28459c24173-gGAkWK_fw658/format/webp',
        },
        imgList: [
          'https://qcb96y.file.qingfuwucdn.com/file/27725e15f2519f9a_1644340970876.jpg',
          // "https://hbimg.huabanimg.com/18ca0956fefa1726e92c1904b44294d2425784f3e7299-H3Zhn3_fw658/format/webp",
          // "https://hbimg.huabanimg.com/94bdde85ea37041332cfac7203b6297fa8aa6a79d50e8-BO1W3K_fw658/format/webp",
          // "https://hbimg.huabanimg.com/e57c09e5b1b1365ea842ff10501a8df8007dbcb3769b4-a4c4yr_fw658/format/webp",
          // "https://hbimg.huabanimg.com/e57c09e5b1b1365ea842ff10501a8df8007dbcb3769b4-a4c4yr_fw658/format/webp"
        ],
        favor_count: 6,
        comment_count: 10,
        is_favor: false,
      },
    }
  },
  onLoad() {},
  onPullDownRefresh() {},
  onReachBottom: function () {},
  computed: {
    img_showStyle: function () {
      if (this.item.imgList.length == 1) return 'item-body-img1'
      else if (this.item.imgList.length == 2) return 'item-body-img2'
      else return 'item-body-img34'
    },
    img_showList: function () {
      var showList = [].concat(this.item.imgList)
      if (showList.length > 3) {
        showList.splice(3)
      }
      return showList
    },
  },
  methods: {
    previewImage: function (index) {
      uni.previewImage({
        current: index,
        urls: this.item.imgList,
        loop: true,
      })
    },
    ToNewsDetail: function () {
      uni.navigateTo({
        url: `../newsDetail/newsDetail?newsID=${this.item._id}`,
      })
    },
    ToPublish: function () {
      uni.navigateTo({
        url: `../publish/publish`,
      })
    },
  },
}
</script>

<style>
.item {
  padding: 20rpx 20rpx 30rpx 20rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30rpx;
}
.item-header-left {
  display: flex;
  align-items: center;
}
.item-header-left image {
  height: 100rpx;
  width: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.item-body {
  position: relative;
  margin-bottom: 20rpx;
}
.item-body-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 20rpx;
}
.item-body-img1 image {
  height: 440rpx;
  width: 440rpx;
  border-radius: 20rpx;
}
.item-body-img2 image {
  height: 220rpx;
  width: 220rpx;
  margin: 0rpx 10rpx;
  border-radius: 20rpx;
}
.item-body-img34 {
  display: flex;
  justify-content: space-around;
}
.item-body-img34 image {
  height: 220rpx;
  width: 220rpx;
  border-radius: 20rpx;
}
.img_more {
  padding: 12rpx;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  display: inline-block;
  position: absolute;
  bottom: 0rpx;
  right: 9rpx;
  border-bottom-right-radius: 20rpx;
}
.img_more text {
}
.item-bottom {
  display: flex;
  align-items: center;
}
.item-bottom-like {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}
.item-bottom-like-icon {
  margin-right: 8rpx;
  height: 50rpx;
  width: 50rpx;
}
.item-bottom-comment {
  display: flex;
  align-items: center;
}
.item-bottom-comment-icon {
  height: 50rpx;
  width: 50rpx;
}

.camera {
  background-color: #00c8b6;
  display: inline-block;
  padding: 40rpx 45rpx;
  border-radius: 50%;
  position: fixed;
  right: 20rpx;
  bottom: 130rpx;
}
.camera image {
  height: 55rpx;
  width: 55rpx;
}
</style>
